<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <style>
        /**{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
        body{
            font-size: 12px !important;
            font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", "Microsoft Yahei", Arial, sans-serif;
        }
        html,body, #app{
            width: 100%;
            /*height: 100%;*/
            /*overflow: hidden;*/
        }
        [v-cloak]{
            display: none;
        }
        /*#app{*/
        /*    overflow: auto;*/
        /*}*/
    </style>
    <script src="../lib/handsontable/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="../lib/handsontable/handsontable.full.min.css">
    <script src="../lib/vue/vue-util.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/handsontable/languages/zh-CN.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <script src="../lib/echart/echarts.min.js"></script>
</head>
<body>
<div id="app" v-cloak style="padding-left: 10px;padding-right: 10px;">
    <div class="panel panel-default">
        <div class="panel-heading">
            检索条件
        </div>
        <div class="panel-body">
            <div class="row">
                <div style="text-align: center" v-if="!conditions.length">该报表管理员未设定条件，请直接按检索查询</div>
                <div class="col-md-2" v-for="v in conditions" v-if="!v.value">
                    <div class="form-group-sm">
                        <label>{{v.name}}</label>
                        <input :type="v.type" class="form-control" v-model="params[v.name]" >
                    </div>
                </div>
                <div class="col-md-2" >
                    <div class="form-group-sm">
                        <label>任务状态</label>
                        <select name="" id="" class="form-control" @change="params.state = $event.target.value" >
                            <option value="">全部</option>
                            <option value="流转中">进行中</option>
                            <option value="已办结">已办结</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center; padding-top: 4px;padding-bottom: 4px;">
            <a href="javascript:;" class="btn btn-sm btn-primary" style="padding-left: 10px;padding-right: 10px;" @click="search">检索</a>
        </div>
    </div>
    <div class="panel panel-default" v-for="v in items" >
        <div class="panel-heading">
            {{v.name}}
        </div>
        <div class="panel-body" >
            <div style="padding-bottom: 10px;">
                <template v-if="v.type == 'excel'">
                    <a href="javascript:;" @click="download(v)">CSV下载</a>
                    <div ref="jexcel">
                    </div>
                </template>
                <template v-if="v.type == 'pie'">
                    <div ref="jexcel" style="min-width: 500px;min-height: 400px;"></div>
                </template>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            conditions:[],
            items:[],
            params:{}
            // excel: {
            //     data: [],
            //     merge: [],
            //     meta: []
            // }
        },
        methods:{
            search: function(){
                var t = this;
                t.items = [];
                t.$nextTick(function () {
                    var id = getParam("id");
                    layer.msg("请稍后，报表正在生成中");
                    $.post("/api/bpm/report/oneReport", JSON.stringify({id: id, args: t.params}) , function (msg) {
                        if(!msg.success){
                            layer.msg("统计出错，请重新设定模型和条件")
                            return
                        }
                        Vue.set(t, "items", msg.data);
                        t.$nextTick(function () {
                            t.items.forEach(function(e,i){
                                if(e.type == 'excel'){
                                    t.initExcel(e,i);
                                } else if(e.type == 'pie'){
                                    t.initPie(e,i, msg.data[i]);
                                }
                            });
                        });
                        // Vue.set(t.excel, "merge", msg.data.merge);
                        // Vue.set(t.excel, "meta", msg.data.meta);
                        // Vue.set(t.excel, "data", msg.data.data);
                        // console.log(t.excel, msg.data.data)
                        // t.initExcel();
                    }, "json");
                });
            },
            init: function(){
                var id = getParam("id");
                var t = this;
                $.get("/api/bpm/report/oneReportCondition", {id:id}, function (msg) {
                    if(!msg.success) {
                        layer.msg("统计出错，请重新设定模型和条件")
                        return
                    }
                    Vue.set(t, "conditions", msg.data);
                });
                return;
            },
            initPie: function(e,i, data){
                var option = {
                    title : {
                        text: e.name ,
                        // subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: data.legendData,

                        selected: data.selected
                    },
                    series : [
                        {
                            name: e.x,//'姓名',
                            type: 'pie',
                            radius : '55%',
                            center: ['40%', '50%'],
                            data: data.seriesData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                var myChart = echarts.init(this.$refs.jexcel[i]);
                myChart.setOption(option, true);
            },
            initExcel: function (e,i) {
                var options = {
                    contextMenu: true,
                    mergeCells: e.merge || [],
                    rowHeaders: true,
                    colHeaders: true,
                    // autoColumnSize: true,
                    // autoRowSize: true,
                    manualRowResize: true,
                    manualColumnResize:true,
                    ManualColumnMove:true,
                    ManualRowMove:true,
                    exportFile: true,
                    // width: 500,
                    // height: 280,
                    colWidths: 120,
                    language:"zh-CN",
                    licenseKey: 'non-commercial-and-evaluation',
                    data: e.data || []
                };
                var hot = e.hot = new Handsontable(this.$refs.jexcel[i], options);
                e.meta && e.meta.forEach(function (e) {
                    hot.setCellMetaObject(e.row, e.col, e);
                });
                hot.render()
            },
            download: function(v){
                console.log(v)
                var exportPlugin = v.hot.getPlugin('exportFile');
                exportPlugin.downloadFile('csv', {filename: v.name});
            }
        },
        mounted: function(){
            this.init();
        }
    });
</script>